<!--
 * @Author: Ryan
 * @Date: 2022-12-08 12:06:25
 * @LastEditors: Ryan
 * @LastEditTime: 2022-12-12 10:47:42
 * @Description: 开发指南-安装
 * @FilePath: \yr-admin-system-framework\src\views\develop\install\index.vue
-->

<template>
  <div class="app-container">
    <div class="install-container">
      <div class="block">
        <h2>安装Visual Studio Code</h2>
        <p>
          工程化以及规范的相关事项均基于VS Code实现
          <el-button
            type="primary"
          ><a href="https://code.visualstudio.com/">Download</a><i
            class="el-icon-download el-icon--right"
          /></el-button>
        </p>

        <h4>安装插件</h4>
        <h5>必装</h5>
        <ul>
          <li>ESLint 代码校验</li>
          <li>EditorConfig for VS Code 统一编辑器代码格式化规则</li>
          <li>Prettier - Code formatter 文件格式化</li>
        </ul>
        <h5>选装</h5>
        <ul>
          <li>Code Spell Checker 单词拼写检查</li>
          <li>JavaScript (ES6) code snippets 代码片段提示</li>
          <li>Vue Language Features (Volar) 支持点击相对路径文件跳转和class名的样式定位</li>
          <li>Auto Close Tag 自动闭合标签</li>
          <li>Auto Rename Tag 尾部闭合标签同步修改</li>
          <li>Element UI Snippets Element UI快捷键提示</li>
          <li>vscode-element-helper 自动提示element标签名称</li>
          <li>element-ui-helper 组件属性提示</li>
          <li>Highlight Matching Tag 高亮显示匹配标签</li>
          <li>Vue Peek 点击vue组件时可跳转到对应的文件</li>
          <li>CSS Peek 快速找到css定义</li>
          <li>GitLens — Git supercharged 鼠光标停留位置显示代码的git修改信息</li>
          <li>Git Graph 查看详细的git commit信息及改动明细</li>
        </ul>
        <el-divider />
      </div>

      <div class="block">
        <h2>Node版本</h2>
        <p>
          请确保你的Nodejs版本>=8.9，
          <el-button
            type="primary"
          ><a href="https://nodejs.org/zh-tw/download/">推荐版本16+</a><i class="el-icon-download el-icon--right" /></el-button>。若本地项目依赖不同版本的Nodejs，也可通过nvm等工具进行管理
        </p>
        <el-divider />
      </div>

      <div class="block">
        <h2>初始化项目</h2>
        <p>安装yarn</p>
        <code-editor
          :value="installYarnValue"
          :display_language="false"
          font_size="14px"
          width="100%"
        />
        <p>确认安装</p>
        <code-editor
          :value="versionValue"
          :display_language="false"
          font_size="14px"
          width="100%"
        />
        <p>安装项目依赖</p>
        <code-editor
          :value="installCodeValue"
          :display_language="false"
          font_size="14px"
          width="100%"
        />
        <el-divider />
      </div>

      <div class="block">
        <h2>启动本地服务</h2>
        <code-editor
          :value="startServe"
          :display_language="false"
          font_size="14px"
          width="100%"
        />
      </div>
    </div>
  </div>
</template>

<script>
import CodeEditor from 'simple-code-editor'
export default {
  name: 'DevelopInstall',
  components: { CodeEditor },
  data() {
    return {
      startServe: `yarn serve`,
      installYarnValue: `npm install --global yarn`,
      versionValue: `yarn --version`,
      installCodeValue: `yarn install`
    }
  },
  created() {},
  methods: {}
}
</script>

<style scoped lang="scss">
.install-container {
  // width: 870px;
  margin: 0 auto;
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  @media (max-width: 992px) {
    width: auto;
  }

  .block {
    h2 {
      padding-bottom: 20px;
    }

    h4 {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
}
</style>
